<template>
	<div class="login">
		<header>
			<img src="../../assets/img/logo.png" >
			<h2>手机号注册/登录</h2>
		</header>
		<form action="" method="">
			<p><input type="text" v-model.lazy.trim="phone" placeholder="请输入手机号"></p>
			<p><input type="text" v-model.lazy.trim="code" class="code" placeholder="请输入验证码"><label @click="getCode()">获取验证码</label></p>
			<button type="button" @click="login()">一键注册/登录</button>
		</form>
		<div class="orderLogin">
			<label>非大陆手机号登录</label>
			<label>账号密码登录</label>
		</div>
		<footer>
			<div class="threelogin">
				<aside><img src="../../assets/img/weixin.png" ></aside>
				<aside><img src="../../assets/img/qq.png" ></aside>
			</div>
			<p class="agreement">
				<input type="checkbox" v-model="agreement"/>未注册游侠客账号的手机，登录时将同时注册，登录代表您已同意
				<span>《服务协议》</span>和<span>《隐私政策》</span></p>
		</footer>
	</div>
</template>

<script>
import Cookies from 'js-cookie';
export default{
	name:'Login',
	data(){
		return {
			phone:'13888888888',
			code:'',
			agreement:true,
			jump:'',//登录成功后跳转的页面
		}
	},
	mounted() {
		this.jump = this.$route.query.jump;
	},
	methods:{
		getCode(){
			this.code = '888888';
		},
		login(){
			if(!this.agreement || this.code=='' || this.phone=='') return false;
			//更改为在线状态
			localStorage.Online = true;
			Cookies.set('phone',this.phone,{expires:1});
			this.$store.commit('onlogin');
			//判断是否从商品详情页跳转过来的
			if(this.jump && this.jump.indexOf('pid')==0){
				this.$router.push({path:'details',query:{pid:this.jump.substr("3")}});
			}else{
				this.$router.push({path: this.jump == undefined ? '/' : '/' +this.jump});
			}
		}
	}
}
</script>

<style scoped>
.login header{
	width: 100%;
	padding-top: 0.5rem;
	text-align: center;
	font-size: 0.4rem;
	font-weight: bold;
}
.login header img{
	width: 20%;
}
.login form{
	width: 85%;
	margin: 1rem auto 0;
}
.login form p{
	line-height: 1.2rem;
}
.login form input{
	text-indent: 0.2rem;
	width: 100%;
	border: none;
	border-radius: 0.1rem;
	line-height: 0.8rem;
	font-weight: bold;
	color: #535353;
	background-color: #f5f5f5;
}
.login form .code{
	width: 70%;
}
.login form p label{
	display: inline-block;
	width: 25%;
	color: #e3ad42;
	text-align: center;
}
.login form button{
	width: 100%;
	margin-top: 0.3rem;
	border: none;
	font-size: 0.4rem;
	border-radius: 0.2rem;
	line-height: 1rem;
	background: linear-gradient(93deg,#ffed5a,#ffcf08);
}
.login .orderLogin{
	width: 80%;
	margin: 0.3rem auto 0;
	display: flex;
	color: #b8b8b8;
	justify-content: space-between;
}
.login footer{
	position: fixed;
	width: 100%;
	bottom: 3rem;
}
.login footer .threelogin{
	width: 50%;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.login footer .threelogin aside{
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #f3f3f3;
}
.login footer .threelogin aside img{
	width: 80%;
}
.login footer .agreement{
	width: 90%;
	color: #5D5D5D;
	margin: 0.5rem auto 0;
}
.login footer .agreement span{
	color: black;
}
</style>
